<template>
	<app-layout>
		<view v-if="!goods" class="u-goods-detail"></view>
		<template v-if="goods">
			<!--商品轮播图-->
			<app-goods-banner v-bind:pic-list="goods.pic_url" v-bind:share="goods.share" v-bind:video-url="goods.video_url" v-bind:goods_id="goodsId"></app-goods-banner>
			<view>
				<bd-info
					:theme="themeObject"
					:name="name"
					:is-negotiable="is_negotiable"
					:subtitle="subtitle"
					:flash-sale="flash_sale"
					:level-show="level_show"
					:price="price"
					:original-price="original_price"
					:price-max="price_max"
					:price-min="price_min"
					:price-member-max="price_member_max"
					:price-member-min="price_member_min"
					:discount="discount"
					:is-vip-card-user="is_vip_card_user"
					:sales="sales"
					:is-vip="is_vip"
					:unit="unit"
					:is-sales="is_sales"
					:goods-id="goodsId"
					:extra-quick-share="extra_quick_share"
					:app-share-pic="app_share_pic ? app_share_title : ''"
					:app-share-title="app_share_title ? app_share_title : name"
					:poster-config="poster_config + `&goods_id=` + goodsId"
					:poster-generate="poster_generate + `&goods_id=` + goodsId"
					:has-poster-nav="true"
					v-bind:goods="goods"
					@share="hShareAppMessage"
					@quickShare="quickShare"
				></bd-info>
			</view>
			
			<!--商品详情-->
			<view class="bd-xbc">
				<view class="bd-name u-line-2">详情</view>
				<bd-detail :detail="detail"></bd-detail>
			</view>
		
		</template>
	
	</app-layout>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import appGoodsBanner from '../../components/page-component/goods/app-goods-banner.vue';
import appGoodsRecommend from '../../components/page-component/app-goods-recommend/app-goods-recommend.vue';
import appQuickNavigation from '../../components/page-component/app-quick-navigation/app-quick-navigation.vue';
import appComposition from '../../components/basic-component/app-composition/app-composition.vue';
import uniSwiperDot from '../../components/basic-component/uni-swiper-dot/uni-swiper-dot';
import uAttr from '../../components/page-component/goods/u-attr.vue';
import appGoodsFullReduce from '../../components/page-component/goods/app-goods-full-reduce.vue';
import bdInfo from '@/components/page-component/goods/bd-info';
import bdCoupon from '@/components/page-component/goods/bd-coupon.vue';
import bdXbc from '@/components/page-component/goods/bd-xbc.vue';
import bdKb from '@/components/page-component/goods/bd-kb.vue';
import bdHc from '@/components/page-component/goods/bd-hc.vue';
import bdDetail from '@/components/page-component/goods/bd-detail.vue';
import bdComments from '@/components/page-component/goods/bd-comments.vue';
import appClose from '@/components/basic-component/app-close/app-close.vue';
import bdService from '@/components/page-component/goods/bd-service.vue';
import bdFlashSale from '@/components/page-component/goods/bd-flash-sale.vue';

export default {
	name: 'goods',
	components: {
		appGoodsBanner,
		'app-goods-recommend': appGoodsRecommend,
		'app-quick-navigation': appQuickNavigation,
		'app-composition': appComposition,
		appClose,
		uniSwiperDot,
		appGoodsFullReduce,
		uAttr,
		bdInfo,
		bdCoupon,
		bdXbc,
		bdKb,
		bdHc,
		bdDetail,
		bdComments,
		bdService,
		bdFlashSale
	},
	data() {
		return {
			showClose: false,
			is_open: 0,
			goods: null,
			selectAttr: null,
			recommend_list: null,
			is_vip: false,
			is_vip_card_user: 0,
			current: 0,
			discount: null,
			attrShow: false,
			shareData: null,
			contact_tel: '',
			contact: '',
			contact_web: '',
			sendPath: '',
			poster_config: this.$api.goods.poster,
			poster_generate: this.$api.poster.goods_new,
			// 限时抢购
			flash_sale: null,
			checked: null,
			// 商品服务
			services: null,
			// 商品详情
			detail: null,
			// 商品ID
			goodsId: null,
			// 套餐组合
			composition: null,
			autoplay: true,
			full_reduce: null,
			goods_marketing_award: null,
			express: null,
			goods_marketing: null,
			exchangeStatus: null,
			exchange: null,

			price: null,
			level_show: null,
			sales: null,
			unit: null,
			is_sales: null,
			extra_quick_share: null,
			price_max: null,
			price_min: null,
			price_member_max: null,
			price_member_min: null,
			original_price: null,
			subtitle: null,
			is_negotiable: null,
			name: null,
			app_share_pic: null,
			app_share_title: null,
			goodsType: null,
			favorite: null,
			goods_coupon_center: null,
			guarantee_title: null,
			guarantee_pic: null,
			param_content: null,
			param_name: null,
			attr_groups: null,
			goods_num: null,
			good_stock: null,
			goods: {}
		};
	},
	computed: {
		...mapState({
			themeObject: function(state) {
				let theme = state.mallConfig.mall.setting.theme_color;
				return {
					back: theme + '-m-back ' + theme,
					backP: theme + '-m-back-p ' + theme,
					backO: theme + '-m-back-o ' + theme,
					theme: theme,
					color: theme + '-m-text ' + theme,
					sBack: theme + '-s-back ' + theme,
					border: theme + '-m-border ' + theme,
					mBtn: theme + '-m-gradient-btn ' + theme,
					sBtn: theme + '-s-gradient-btn ' + theme
				};
			}
		}),
		...mapState({
			mall: state => state.mallConfig.mall,
			gConfig: state => state.gConfig
		}),
		...mapGetters('mallConfig', {
			getTheme: 'getTheme'
		}),
		good_negotiable: function() {
			let good_negotiable = this.mall.setting.good_negotiable;
			this.contact_tel = '';
			this.contact = '';
			this.contact_web = '';
			let arr = [];
			for (let i = 0; i < good_negotiable.length; i++) {
				if (good_negotiable[i] === 'contact_tel') {
					this.contact_tel = 'contact_tel';
				}
				// #ifndef MP-TOUTIAO || MP-ALIPAY || H5
				if (good_negotiable[i] === 'contact') {
					this.contact = 'contact';
				}
				// #endif
				if (good_negotiable[i] === 'contact_web') {
					this.contact_web = 'contact_web';
				}
			}
			if (this.contact_tel) {
				arr.push(this.contact_tel);
			}
			if (this.contact) {
				arr.push(this.contact);
			}
			if (this.contact_web) {
				arr.push(this.contact_web);
			}
			return arr;
		},
		contactBtn: function() {
			const len = this.good_negotiable.length;
			const theme = this.getTheme;
			if (len === 3 && (theme === 'a' || theme === 'b' || theme === 'f')) {
				return `${this.themeObject.mBtn} text ${theme} bd-three-one bd-no-radius `;
			} else if (len === 3 && !(theme === 'a' || theme === 'b' || theme === 'f')) {
				return `${this.themeObject.mBtn} ${theme}-s-text ${theme} bd-three-one bd-no-radius `;
			}
			if (len === 2 && (theme === 'a' || theme === 'b' || theme === 'f') && !this.contact_tel) {
				return `${this.themeObject.sBtn} text ${theme} bd-btn-half bd-content-radius-0`;
			} else if (len === 2 && (theme === 'a' || theme === 'b' || theme === 'f') && this.contact_tel) {
				return `${theme}-m-back text ${theme} bd-btn-half bd-content-radius-1`;
			} else if (len === 2 && !(theme === 'a' || theme === 'b' || theme === 'f') && !this.contact_tel) {
				return `${this.themeObject.sBtn} ${theme}-s-text ${theme} bd-btn-half bd-content-radius-0`;
			} else if (len === 2 && !(theme === 'a' || theme === 'b' || theme === 'f') && this.contact_tel) {
				return `${this.themeObject.mBtn} ${theme}-s-text ${theme} bd-btn-half bd-content-radius-1`;
			} else {
				return `${this.themeObject.mBtn} text ${theme} all-width all-radius `;
			}
		}
	},
	onLoad(options) {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		if (this.isLogin) {
			this.$store.dispatch('user/info');
		}
		this.goodsId = options.id;
		// #ifndef MP-ALIPAY
		this.loadData(this.goodsId);
		// #endif
		this.sendPath = '/pages/goods/goods?id=' + options.id;
		console.log(this.sendPath);
		if (options && options.exchange) {
			this.exchangeStatus = options.exchange;
			this.exchange = options;
		}
	},
	onShow() {
		this.autoplay = true;
		this.showClose = false;
		setTimeout(() => {
			this.showClose = true;
			// #ifdef MP-ALIPAY
			this.loadData(this.goodsId);
			// #endif
		});
	},
	onHidden() {
		this.autoplay = false;
	},
	// #ifdef MP-WEIXIN
	onShareTimeline() {
		// 分享朋友圈beta
		return this.$shareTimeline({
			title: this.app_share_title ? this.app_share_title : this.name,
			imageUrl: this.goods.pic_url[0].pic_url,
			query: {
				id: this.goodsId
			}
		});
	},
	// #endif
	methods: {
		routoVR() {
			uni.navigateTo({
				url: '/pages/web/web?url=' + encodeURIComponent(this.goods.vr_url),
				fail: res => {
					console.log(res);
				}
			});
		},
		hShareAppMessage(s = false) {
			return this.$shareAppMessage(
				{
					title: this.app_share_title ? this.app_share_title : this.name,
					imageUrl: this.app_share_pic ? this.app_share_pic : this.goods.pic_url[0].pic_url,
					path: '/pages/goods/goods',
					desc: this.subtitle,
					params: {
						id: this.goodsId
					}
				},
				s
			);
		},
		getMall(e) {
			this.is_open = e.is_open;
		},
		toExchange() {
			let mch_list = [
				{
					mch_id: 0,
					goods_list: [
						{
							id: this.exchange.id,
							attr: this.exchange.attr,
							num: this.exchange.goods_num,
							cat_id: 0,
							goods_attr_id: this.exchange.attr_id
						}
					],
					code: this.exchange.code,
					token: this.exchange.token
				}
			];
			let url = `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}`;
			url += `&preview_url=${encodeURIComponent(this.$api.exchange.exchange_preview)}&submit_url=${encodeURIComponent(this.$api.exchange.exchange_submit)}&plugin=exchange`;
			uni.navigateTo({
				url: url
			});
		},
		// 规格选择
		check({ item }) {
			this.checked = item;
		},
		change(e) {
			if (e.detail.source === 'touch') {
				this.current = e.detail.current;
			}
			if (e.detail.source === 'autoplay') {
				this.current = e.detail.current;
			}
		},
		quickShare(info) {
			this.shareData = info;
			//#ifdef H5
			this.$shareAppMessage(this.shareData, true);
			// #endif
		},
		toComposition(item) {
			let id = item.id > 0 ? item.id : this.composition.list[0].id;
			uni.navigateTo({
				url: this.composition.url + '?goods_id=' + this.goodsId + '&composition_id=' + id
			});
		},
		loadData(id) {
			return new Promise((resolve, reject) => {
				this.$showLoading();
				this.$request({
					url: this.$api.goods.detail,
					data: {
						id: id
					}
				})
					.then(response => {
						this.$hideLoading();
						if (response.code === 0) {
							let {
								services,
								detail,
								name,
								vip_card_appoint,
								plugin_extra,
								id,
								goods_activity,
								goods_marketing_award,
								goods_marketing,
								express,
								price,
								sales,
								level_show,
								is_sales,
								unit,
								extra_quick_share,
								price_max,
								price_min,
								price_member_max,
								price_member_min,
								original_price,
								subtitle,
								is_negotiable,
								app_share_title,
								app_share_pic,
								type,
								favorite,
								goods_coupon_center,
								guarantee_title,
								guarantee_pic,
								param_content,
								param_name,
								attr_groups,
								goods_num,
								good_stock
							} = response.data.goods;
							uni.setNavigationBarTitle({
								title: name
							});
							this.goods = response.data.goods;
							this.name = name;
							this.app_share_pic = app_share_pic;
							this.app_share_title = app_share_title;
							this.goods = response.data.goods;
							this.services = services;
							this.detail = detail;
							this.goodsId = id;
							this.flash_sale = plugin_extra.flash_sale;
							this.composition = plugin_extra.composition;
							this.goods_marketing_award = goods_marketing_award;
							this.goods_marketing = goods_marketing;
							this.express = express;
							this.price = price;
							this.level_show = level_show;
							this.sales = sales;
							this.unit = unit;
							this.is_sales = is_sales;
							this.price_max = price_max;
							this.price_min = price_min;
							this.price_member_max = price_member_max;
							this.price_member_min = price_member_min;
							this.original_price = original_price;
							this.subtitle = subtitle;
							this.is_negotiable = is_negotiable;
							this.extra_quick_share = extra_quick_share;
							this.goodsType = type;
							this.favorite = favorite;
							this.goods_coupon_center = goods_coupon_center;
							this.guarantee_title = guarantee_title;
							this.param_content = param_content;
							this.guarantee_pic = guarantee_pic;
							this.attr_groups = attr_groups;
							this.param_name = param_name;
							this.goods_num = goods_num;
							this.good_stock = good_stock;
							if (goods_activity) {
								this.full_reduce = goods_activity.full_reduce;
							}
							if (vip_card_appoint.discount || vip_card_appoint.discount === '0.00') {
								this.is_vip = true;
								this.discount = vip_card_appoint.discount;
							}
							this.is_vip_card_user = vip_card_appoint.is_vip_card_user;
							this.loadRecommend();
							// #ifdef H5
							this.hShareAppMessage();
							// #endif
							resolve();
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none'
							});
							reject();
						}
					})
					.catch(() => {
						reject();
						this.$hideLoading();
					});
			});
		},
		onAttr(data) {
			this.selectAttr = data;
		},
		loadRecommend() {
			this.$request({
				url: this.$api.goods.new_recommend,
				data: {
					goods_id: this.goodsId,
					type: 'goods'
				}
			}).then(response => {
				if (response.code === 0) {
					this.recommend_list = response.data.list;
				}
			});
		},
		back() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		setFavorite() {
			let url = this.$api.user.favorite_add;
			let favorite = true;
			if (this.favorite) {
				url = this.$api.user.favorite_remove;
				favorite = false;
			}
			this.favorite = favorite;
			this.$request({
				url: url,
				data: {
					goods_id: this.goodsId
				}
			}).then(response => {
				if (response.code === 0) {
				} else {
					uni.showModal({
						title: '提示',
						content: response.msg,
						showCancel: false
					});
				}
			});
		},
		clickAttr(data) {
			if (this.goods.type === 'ecard' && data === 0) {
				uni.showToast({
					title: '虚拟商品不允许加入购物车',
					icon: 'none'
				});
				return;
			}
			this.attrShow = true;
		},
		setCoupon(index) {
			this.$set(this.goods_coupon_center[index], 'is_receive', 1);
		},
		router(url) {
			uni.navigateTo({
				url: url
			});
		},
		makePhoneCall(number) {
			uni.makePhoneCall({
				phoneNumber: number
			});
		}
	},
	// #ifdef MP
	onShareAppMessage(object) {
		if (object.from === 'button' && this.shareData) {
			return this.$shareAppMessage(this.shareData);
		}
		return this.hShareAppMessage();
	}
	// #endif
};
</script>

<style scoped lang="scss">
	.body{
		background: #fff;
	}
.bd-xbc {
	width: 100%;
	border-bottom: 1px solid #eee;
	padding:20rpx;
	background-color: #ffffff;
	margin: 24rpx 0 0;
	.acc {
		display: flex;
		flex-direction: column;
		padding: 0 !important;
		justify-content: center;
		image{
			height:200upx;
		}
	}
	.bd-name {
		position: relative;
		padding-left: 25upx;
		font-size: 1em !important;
		border-bottom: 1px solid #f6f6f6;
		padding-bottom: 20rpx;
		&:before{
			content: "";
			left: 10upx;
			height: 1em;
			top: 10%;
			width: 2px;
			background-color: #000;
			position: absolute;
		}
		image{
			width: 40upx;
			margin-right: 10upx;
		}
		font-size: 32rpx;
		color: #353535;
		line-height: 42rpx;
		margin-top: 5rpx;
	}
	.p-box {
		font-size: 26upx;
		line-height: 40upx;
	}
	.p-box:last-child {
		border-width: 0;
	}
	.p-label {
		color: #949494;
		margin-right:10upx;
		word-break: break-word;
	}
	.p-value {
		color: #949494;
		word-break: break-word;
	}
}
.goods-composition {
	width: 702upx;
	margin: 20upx 20upx 0 20upx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 15upx;
	.goods-composition-title {
		font-size: 28rpx;
		color: #353535;
		margin-bottom: 20rpx;
	}
	.goods-composition-swiper {
		height: 194rpx;
	}
	.goods-composition-more {
		margin: 20rpx auto 4rpx auto;
		width: 226rpx;
		padding: 0 24rpx;
		height: 56rpx;
		line-height: 54rpx;
		border-radius: 28rpx;
		border: 2rpx solid #bbbbbb;
		font-size: 24rpx;
		color: #999999;
		image {
			width: #{12rpx};
			height: #{22rpx};
		}
	}
}
.goods-name {
	padding: 24upx 24upx 0 24upx;
	background-color: #ffffff;
	color: #353535;
	font-size: 32upx;
	line-height: 42upx;
}

.goods-subtitle {
	padding: #{24rpx 24rpx 0 24rpx};
	font-size: 24rpx;
	background-color: #ffffff;
	color: #999999;
}

.price {
	padding-top: #{24rpx};
	background-color: #ffffff;
}
.vip-card {
	padding-bottom: #{20rpx};
	background-color: #fff;
}
.attr {
	background-color: #f7f7f7;
}
.bottom {
	width: 100%;
	height: #{110rpx};
}

.bd-bottom {
	width: 750upx;
	height: 110upx;
	padding: 20upx 24upx;
}

.bd-back {
	width: 66upx;
	height: 100%;
	margin-right: 20upx;
}
.bd-icon {
	width: 30upx;
	height: 30upx;
	margin-bottom: 8upx;
}
.bd-text {
	font-size: 20upx;
	color: #888888;
	line-height: 1;
}
.bd-btn {
	text-align: center;
	line-height: 70upx;
	font-size: 28upx;
	border-radius: 35upx;
}
.bd-btn-left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.bd-btn-right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.bd-btn-half {
	width: 50%;
}
.bd-btn-color {
	color: #fff;
}
.bd-oversell-btn {
	background-color: #cdcdcd;
}

.bd-content-radius-0 {
	border-radius: 35upx 0 0 35upx;
}
.bd-content-radius-1 {
	border-radius: 0 35upx 35upx 0;
}
.bd-btn-tel {
	font-size: 26upx;
	> view {
		line-height: 70upx;
		text-align: center;
	}
	.tel {
		border-top-left-radius: 35upx;
		border-bottom-left-radius: 35upx;
	}
	.contact {
		padding: 0;
		font-size: 26upx;
		height: 70upx;
		line-height: 70upx;
		margin: 0;
		border: none;
	}
	.service {
		border-top-right-radius: 35upx;
		border-bottom-right-radius: 35upx;
	}
	.all-radius {
		border-radius: 35upx;
	}
	.all-width {
		width: 100%;
	}
	.bd-three-one {
		width: calc(100% / 3);
	}
	.bd-no-radius {
		border-radius: 0;
	}
}
.bd-exchange {
	line-height: 70upx;
	font-size: #{28rpx};
	text-align: center;
	color: #fff;
	border-radius: 35upx;
	&.bd-over {
		background: #e9e9e9;
		color: #999999;
	}
}
.text {
	color: #ffffff;
}
.default-bakground {
	background-color: #446dfd;
	color: #ffffff;
}
.u-bottom-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1500;
	background-color: #ffffff;
	box-shadow: 0 -1rpx 20rpx -15rpx #353535;
}
.u-bottom-height-0 {
	height: 110upx;
}
.u-bottom-height-1 {
	height: 190upx;
}
.goods-margin {
	margin-top: 20upx;
}
.bd-goods {
	margin: 24 upx 24 upx 24 upx 24 upx;
}
.ecard-text {
	color: #999999;
}

.bd-content {
	padding: 0;
	display: block;
	background-color: #ffffff;
}
.bd-content-view {
	width: 100%;
	height: 100%;
}
</style>
